<style lang="scss" type="text/scss">
  @import '../assets/index.scss';

  .d-table {
    min-height: 500px;
  }

  .layer-loading {
    text-align: center;
    background: #f9f9f9;
    padding-top: 15rem;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1200;
    bottom: 0;
  }

  .layer-loading > i {
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    background-color: #a6a6a6;
    display: inline-block;
    border-radius: 100%;
    margin: 0 2px;
    height: 18px;
    width: 18px;
  }

  .layer-loading > i:nth-child(2) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }

  .layer-loading > i:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }

  .btn-left-list-more {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    .el-button {
      border: none;
      color: #666;
      background: 0 0;
      padding-left: 0;
      padding-right: 0;
      &:hover {
        color: #333;
      }
    }
  }

  .min-div {
    display: inline;
    overflow: hidden;
    line-height: 0;
  }

  .app-content-view {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    overflow: auto;
    padding-bottom: 28px;
    &.overflow-hidden {
      overflow: hidden;
    }
  }

  .main-footer {
    position: fixed;
    display: flex;
    bottom: 0;
    z-index: 2;
    left: 0;
    right: 0;
    background: #eee;
    padding: 0;
    .el-button--default {
      background: transparent;
    }
    .el-button {
      border-radius: 0;
    }
    .el-button + .el-button {
      margin-left: 0;
      border-radius: 0;
      border-left: 0;
    }
  }
</style>
<template>
  <div>
    <div class="main-body ">
      <div class="layer-loading" v-show="loading">
        <i></i>
        <i></i>
        <i></i>
      </div>
      <transition name="scale" mode="out-in" appear>
        <router-view class="app-content-view"></router-view>
      </transition>
      <div class="main-footer" v-if="projectId">
        <el-button @click.stop.prevent="goRouter('/')" size="mini">
          <f-a name="project"></f-a>
          项目管理
        </el-button>

        <el-button @click.stop.prevent="goProjectRouter('dataSource')" size="mini"
                   :type="currentMeta=='dataSource'?'primary':'default'">
          <f-a name="data"></f-a>
          数据源
        </el-button>

        <el-button @click.stop.prevent="goProjectRouter('charts')" size="mini"
                   :type="currentMeta=='charts'?'primary':'default'">
          <f-a name="chart"></f-a>
          已建图表
        </el-button>
        <el-tooltip class="item" effect="dark" content="新建图表" placement="top-start">
          <el-button @click.stop.prevent="addChart()" size="mini">
            <f-a name="chart-plus"></f-a>
          </el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="新建仪表盘" placement="top-start">
          <el-button @click.stop.prevent="addChartDashboard()" size="mini">
            <f-a name="dashboard-plus"></f-a>
          </el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="新建故事" placement="top-start">
          <el-button @click.stop.prevent="addStory()" size="mini">
            <f-a name="story-plus"></f-a>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <attachmentDialog></attachmentDialog>
  </div>
</template>

<script>
  import {http} from '@/resources';

  import AppHeader from '@/components/app.header.vue';
  import utils from '@/tools/utils';
  import attachmentDialog from '@/components/attachment.dialog.vue';
  import chartMix from '@/mixins/chartMix';

  export default {
    data: () => ({
      transitionName: 'slide-left',
      toRoute: {},
      loading: true
    }),
    mixins: [chartMix],
    computed: {
      projectId: function () {
        return this.$route.params.projectId;
      },
      currentMeta: function () {
        return this.$route.name;
      }
    },
    beforeRouteEnter(to, form, next) {
      next(vm => {
        vm.toRoute = to;
      });
    },
    beforeRouteUpdate(to, from, next) {
      utils.removeClass(
        document.getElementsByTagName('body')[0],
        'overflow-hidden'
      );
      this.toRoute = to;
      next();
    },
    components: {
      AppHeader,
      attachmentDialog
    },
    methods: {
      setBodyHeight: function () {
        this.$store.commit('setBodyHeight', window.innerHeight);
        this.$store.commit('setBodyWidth', window.innerWidth);
      },
      goRouter: function (path) {
        this.$router.push({path: path});
      },
      goProjectRouter: function (path) {
        this.$router.push({path: '/project/' + this.projectId + '/' + path});
      },
      goProjectAddRouter: function (path) {
        let newId = 'new';
        this.$router.push({
          path: '/project/' + this.projectId + '/' + path + '/' + newId
        });
      },
      getfunctions() {
        http.get('/getfunctions').then(res => {
          this.$store.commit('initAggregateFunList', res.data.data);
        });
      }
    },
    mounted: function () {
      window.localStorage.removeItem('noticeError');
      this.loading = false;
      window.addEventListener('resize', e => {
        this.setBodyHeight();
      });
      this.setBodyHeight();
      this.getfunctions();
    }
  };
</script>
